<template>
  <div>
    <request-tool
      @save="onSaveSubmit"
      :is-quick="true"
      :env="apiStore.env"
      ref="requestToolComponent"
    />
    <v-dialog v-model="visible" max-width="600px">
      <v-card class="p-4">
        <el-form :model="form">
          <el-form-item label="名称" prop="summary">
            <el-input v-model="form.summary"></el-input>
          </el-form-item>
          <el-form-item>
            <span class="text-right" v-loading="createSubmitLoading">
              <el-button @click="onCreateSubmit">创建</el-button>
              <el-button @click="visible = false">取消</el-button>
            </span>
          </el-form-item>
        </el-form>
      </v-card>
    </v-dialog>
  </div>
</template>
  
  <script>
import RequestTool from "@/components/RequestTool/index.vue";
import { onMounted, reactive, ref } from "@vue/composition-api";
import { useApiStore } from "@/store/api";
export default {
//   name: "api-quick",
  components: {
    RequestTool,
  },
  setup() {
    const requestToolComponent = ref(null);
    const apiStore = useApiStore();
    const form = reactive({
      summary: "",
    });
    function fetchQuickDoc() {
      if (apiStore.docId && apiStore.docId > 0) {
        const tab = apiStore.tabList.find(
          (item) => item.key === 2 + "" + apiStore.docId
        );
        console.log(tab)
        if (tab && tab.doc) {
          requestToolComponent.value.setQuickDoc(tab.doc);
          return Promise.resolve();
        } else {
          return apiStore.fetchQuickDoc().then(() => {
            requestToolComponent.value.setQuickDoc(apiStore.doc);
          });
        }
      } else {
        requestToolComponent.value.setQuickDoc({});
      }
    }
    onMounted(() => {
        console.log('moun')
      fetchQuickDoc();
    });

    const visible = ref(false);
    let tmpDoc = null;
    const createSubmitLoading = ref(false);
    function onCreateSubmit() {
      tmpDoc.summary = form.summary;
      createSubmitLoading.value = true;
      apiStore.saveQuickDoc(tmpDoc).finally(() => {
        visible.value = false;
        createSubmitLoading.value = false;
      });
    }

    function onSaveSubmit(doc, resolve) {
      if (apiStore.docId > 0) {
        apiStore.saveQuickDoc(doc).finally(() => {
          resolve();
        });
      } else {
        tmpDoc = doc;
        visible.value = true;
        resolve();
      }
    }

    return {
      requestToolComponent,
      apiStore,
      fetchQuickDoc,
      onSaveSubmit,
      form,
      visible,
      onCreateSubmit,
      createSubmitLoading,
    };
  },
  beforeRouteUpdate(to, from, next) {
    console.log('before update')
    if (from.name === "api-quick") {
      const tab = this.apiStore.tabList.find(
        (item) => item.key === 2 + "" + from.query.docId
      );
      console.log(from.query.docId, 'qu old');
      if (tab) {
        console.log("_____", this.$refs.requestToolComponent.getQuickDoc());
        tab.doc = this.$refs.requestToolComponent.getQuickDoc();
      }
    }
    next()
    // if (to.name === "api-quick") {
    //   this.fetchQuickDoc().then(() => {
    //     next();
    //   });
    // } else {
    //   next();
    // }
  },
};
</script>
  
  <style scoped>
</style>